import React from 'react'

import type { ColumnsType } from 'antd/es/table'
import { useTranslation } from 'react-i18next'
import { Table } from 'antd'
import './App.css'
interface Idata {
  name: string
  sex: string
}

function App() {
  // t是一个函数,最终会帮我们去对应的语言包中找到要渲染的值并返回
  // i18n 是一个对象,里面提供了一个方法,可以让我们修改当前语言
  // useTranslation(['app']) 传入的数组中写了app,则t函数执行的时候,会自动找到对应的语言包,进入到语言包之后,会自动找到json对象里面的app属性,再从app属性里面,找t函数中对应的属性
  const { t, i18n } = useTranslation(['app'])
  const columns: ColumnsType<Idata> = [
    {
      title: t('index'),
      render(_, x, index) {
        return index + 1
      },
    },
    {
      title: t('username'),
      dataIndex: 'name',
    },
    {
      title: t('sex'),
      dataIndex: 'sex',
    },
  ]
  return (
    <div className="App">
      <button
        onClick={() => {
          // 切换当前语言  传入的参数要和i18n初始化时语言包属性同名
          i18n.changeLanguage('en')
        }}
      >
        english
      </button>
      <button
        onClick={() => {
          i18n.changeLanguage('zh')
        }}
      >
        中文
      </button>
      <h1>{t('xxx')}</h1>
      <h2>{t('sz')}</h2>
      <Table
        columns={columns}
        dataSource={[
          {
            name: '海静',
            sex: '男',
          },
          {
            name: '老陶',
            sex: '女',
          },
        ]}
        pagination={{
          showQuickJumper: true,
          total: 60,
          pageSize: 5,
        }}
      ></Table>
    </div>
  )
}

export default App
